<template>
  <span class="block" @click="handlerClick">{{ multiplicand }}×{{ multiplier }}={{ result }}</span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// import { numberToChinese } from '../utils/index'

const props = defineProps({
  multiplier: {
    type: Number,
    required: true,
    default: () => 1
  },
  multiplicand: {
    type: Number,
    required: true,
    default: () => 1
  }
})

const emits = defineEmits<{
  (e: 'play', fileName: string): void
}>()

const result = computed(() => props.multiplicand * props.multiplier)

const handlerClick = () => {
  emits('play', `${props.multiplicand}x${props.multiplier}=${result.value}.mp3`)
  // injectPlay(`${props.multiplicand}x${props.multiplier}=${result.value}.mp3`)
  // const question = `${numberToChinese(props.multiplicand)}${numberToChinese(props.multiplier)}`
  // let resultStr = ''
  // if (result.value < 10) {
  //   resultStr = `得${numberToChinese(result.value)}`
  // } else {
  //   resultStr = `${numberToChinese(result.value)}`
  // }
  // console.log(question + resultStr)
  // speak(question + resultStr)
}


</script>

<style scoped>
.block {
  display: inline-block;
  padding: 5px;
  margin: 5px;
  border: 1px solid #409EFF;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  width: 75px;
  text-align: center;
  background-color: #409EFF;
}

.block:hover {
  opacity: 0.6;
}
</style>